import { ref, onMounted, onUnmounted, Ref } from 'vue'

// 传入DOM是不会变化的，所以需要一个elementRef 响应式对象
// Ref代表类型，把泛型传进去，有可能一开始是null 或者 HTMLElement
const useClickOutside = (elementRef: Ref<null | HTMLElement>) => {

    // 控制显示与隐藏
    const isClickOutside = ref(false)

    // 事件处理函数， 因为是点击事件 需要设置为：MouseEvent
    const handler = (e: MouseEvent) => {

        // value是存在的，不是none
        if (elementRef.value) {
            // elementRef.value和DOM节点是否包含当前节点
            if (elementRef.value.contains(e.target as HTMLElement)) {
                isClickOutside.value = false
            }
            else {
                isClickOutside.value = true
            }
        }
    }

    // 添加 click事件
    onMounted(() => {
        document.addEventListener('click', handler)
    })
    // 移出 click事件
    onUnmounted(() => {
        document.removeEventListener('click', handler)
    })
    
    return isClickOutside

}
export default useClickOutside